<template>
  <view class="privileges-container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <view class="back-icon" @tap="goBack">
        <text class="iconfont icon-back">&#xe679;</text>
      </view>
      <image class="title-image" src="https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png" mode="aspectFit"></image>
    </view>

    <!-- 会员特权内容 -->
    <view>
      <!-- 页面标题 -->
      <view class="level-header">
        <text class="level-title">如来禅境珍品</text>
      </view>

      <!-- 内容展示区域 -->
      <view class="privileges-content-container">
        <scroll-view class="privileges-scroll" scroll-y>
          <!-- 商品展示区域 -->
          <view class="content-section product-list-section">
            <view class="product-desc">
              购买此珍品，即可获得如来者资格
            </view>
            
            <!-- 单个商品展示 -->
            <view class="single-product-container">
              <image :src="productList[0]?.product_image" mode="aspectFill" class="product-image-large"></image>
              <view class="product-info-large">
                <text class="product-title-large">{{ productList[0]?.product_name }}</text>
                <view class="product-price-row-large">
                  <text class="product-price-large">¥{{ productList[0]?.product_price }}</text>
                  <view class="buy-now-btn-large" @tap="showAgreementBeforeBuy">立即购买</view>
                </view>
              </view>
            </view>
          </view>

          <!-- 底部空间 -->
          <view class="bottom-space"></view>
        </scroll-view>
      </view>

      <!-- 底部按钮 -->
      <view class="buy-button-container" v-if="!loading">
        <view class="buy-button" @tap="navigateToProducts">
          <text class="buy-button-text">查看更多珍品</text>
        </view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view class="loading-overlay" v-if="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 会员协议弹窗 - 购买时显示 -->
    <view class="modal" v-if="showAgreementModal">
      <view class="modal-mask" @tap="cancelAgreement"></view>
      <view class="modal-container agreement-modal">
        <view class="modal-header">
          <text class="modal-title">如来者购买协议</text>
          <view class="modal-close" @tap="cancelAgreement">×</view>
        </view>
        <scroll-view class="modal-body agreement-content" scroll-y>
          <view class="agreement-title">尊敬的如来者：</view>
          <view class="agreement-paragraph">感谢您选择通过首次购买加入如来者体系。请您在完成购买前仔细阅读以下条款，确认并同意本协议内容：</view>
          
          <view class="agreement-section">
            <view class="agreement-section-title">如来者资格获取</view>
            <view class="agreement-item">您需通过首次购买指定商品或达到特定消费金额（具体以页面展示为准），方可激活对应如来者身份资格。</view>
            <view class="agreement-item">如来者身份权益自购买成功后即时生效，具体有效期及续费规则以如来者身份说明为准。</view>
          </view>
          
          <view class="agreement-section">
            <view class="agreement-section-title">如来者善益说明</view>
            <view class="agreement-item">不同如来者身份享有差异化善益（如价格折扣、专属商品、生日礼遇等），具体善益以如来者中心页面公示为准。</view>
            <view class="agreement-item">部分善益需满足附加条件（如邀请好友数量、累计消费金额等）方可解锁，请仔细查阅善益说明。</view>
          </view>
          
          <view class="agreement-section">
            <view class="agreement-section-title">个人信息授权</view>
            <view class="agreement-item">您授权本公司基于如来者服务需要，使用您的购买记录、联系方式等信息用于权益发放、等级计算及如来者通知。</view>
            <view class="agreement-item">您的个人信息将严格遵循《隐私政策》进行保护，未经允许不会向第三方披露。</view>
          </view>
          
          <view class="agreement-section">
            <view class="agreement-section-title">协议修改与终止</view>
            <view class="agreement-item">公司有权根据运营需要调整如来者善益规则，变更内容将通过公告或站内信通知，若您继续使用如来者服务视为接受修改。</view>
            <view class="agreement-item">如您存在恶意套取善益、违规操作等行为，公司有权终止您的如来者资格且不退还已享善益。</view>
          </view>
          
          <view class="agreement-section">
            <view class="agreement-section-title">免责声明</view>
            <view class="agreement-item">因不可抗力（如系统故障、自然灾害等）导致如来者善益无法正常发放的，公司将尽力修复但不承担额外赔偿责任。</view>
            <view class="agreement-item">如来者专属商品库存及活动名额有限，以实际兑换/领取成功为准，售罄后不补货。</view>
          </view>
        </scroll-view>
        <view class="modal-footer agreement-footer">
          <view class="agreement-checkbox" @tap="toggleAgreement">
            <view class="checkbox" :class="{ checked: agreementChecked }">
              <text class="checkbox-icon" v-if="agreementChecked">✓</text>
            </view>
            <text class="checkbox-text">我已阅读并同意以上协议</text>
          </view>
          <view class="button-group">
            <button class="cancel-button" @tap="cancelAgreement">返回</button>
            <button 
              class="confirm-button" 
              :class="{ disabled: !agreementChecked }"
              :disabled="!agreementChecked"
              @tap="confirmPurchase"
            >确认购买</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { gradeProductApi } from '../../api/product';
import { gradeListApi, buyGrdeApi } from '../../api/user';
import { userStore } from '../../store/userStore';

const user = userStore();

export default {
  name: "memberPrivilegesPage",
  data() {
    return {
      showLogin: false,
      memberLevelList: [],
      userInfo: {},
      level: {},
      expired: "", // 会员过期时间
      currentSwiper: 0,
      loading: true,
      loadingText: "正在加载会员权益...",
      currentLevel: 0,
      memberLevels: [],
      
      // 协议相关
      showAgreementModal: false, // 控制协议弹窗显示
      agreementChecked: false, // 协议是否勾选
      selectedLevel: null, // 当前选中的等级
      
      // 新增：商品列表
      productList: []
    }
  },
  onLoad() {
    // 默认接受协议，不显示入口协议
    this.agreementAccepted = true;
    
    // 加载数据
    this.initData();
  },
  onShow() {
    // 加载用户信息和会员等级
    this.getUserInfo();
    this.getLevelList();
  },
  methods: {
    goBack() {
      // 如果未接受协议，直接返回上一页
      if (!this.agreementAccepted) {
        uni.navigateBack();
        return;
      }
      uni.navigateBack();
    },
    
    async initData() {
      try {
        this.loading = true;
        gradeProductApi({
			grade_id:13
		}).then((res)=>{
			this.productList = res
		})
      } catch (error) {
        uni.showToast({
          title: '获取会员权益信息失败',
          icon: 'none'
        });
      } finally {
        this.loading = false;
      }
    },

    // 获取用户信息
    async getUserInfo() {
      if (user.userInfo) {
        this.userInfo = user.userInfo;
      } else {
        await user.getUserInfo();
        this.userInfo = user.userInfo;
      }
    },
    
    // 获取等级列表
    async getLevelList() {
      try {
        const res = await gradeListApi();
        if (Array.isArray(res)) {
          this.memberLevels = res;
        }
      } catch (error) {
        console.error('获取会员等级列表失败:', error);
      }
    },

    switchLevel(index) {
      this.currentLevel = index;
    },

    handleSwiperChange(e) {
      this.currentLevel = e.detail.current;
    },
    
    // 安全获取图片源
    getImageSrc(name) {
      // 根据会员等级名称返回对应证书图片
      // 修改为基于排序字段获取图片
      if(name=="如来者"){
        return "https://file.wykji.cn/uploads/20250504/f16d1e7883c599e418ff49b9880bede6.png"
      } else if(name=="守护使者"){
        return "https://file.wykji.cn/uploads/20250504/005698ef05fc9254081a0307a2092eb7.png"
      }
      return ""; // 添加默认返回值
    },
    
    // 安全获取内容文本
    getContentText(content, defaultText) {
      return content || defaultText;
    },

    formatContent(content) {
      if (!content) return '';
      
      // 处理换行符
      let formattedContent = content.replace(/\n/g, '<br/>');
      
      // 检测是否已经包含HTML标签，如果没有，则添加样式并包装为特权列表
      if (formattedContent.indexOf('<') === -1) {
        // 尝试按行拆分
        const lines = formattedContent.split('<br/>');
        if (lines.length > 0) {
          formattedContent = '<div class="privilege-item-wrapper">';
          lines.forEach(line => {
            if (line.trim()) {
              formattedContent += `<div class="privilege-item"><text class="privilege-text">${line}</text></div>`;
            }
          });
          formattedContent += '</div>';
        } else {
          // 添加默认样式
          formattedContent = `<div style="font-size: 28rpx; color: #75695C; line-height: 1.6;">${formattedContent}</div>`;
        }
      }
      
      return formattedContent;
    },
    
    isCurrentUserLevel(grade_id) {
      if (!user.userInfo || !user.userInfo.grade) return false;
      
      // 如果传入的是字符串'rulaizhe'，表示检查是否为如来者
      if (grade_id === 'rulaizhe') {
        // 查找如来者等级ID
        const rulaizheLevel = this.memberLevels.find(level => level.name === '如来者');
        if (rulaizheLevel) {
          return user.userInfo.grade.grade_id === rulaizheLevel.grade_id;
        }
        return false;
      }
      
      // 否则按照普通等级ID检查
      return user.userInfo.grade.grade_id === grade_id;
    },
    
    // 判断是否显示购买按钮
    showBuyButton(level) {
      // 如果级别不存在，返回false
      if (!level) return false;
      
      // 免费会员不显示购买按钮
      if (parseFloat(level.price) <= 0) return false;
      
      // 当前等级显示续费按钮
      if (this.isCurrentUserLevel(level.grade_id)) return true;
      
      // 付费会员显示购买按钮
      return true;
    },
    
    // 获取按钮文本
    getBuyButtonText(level) {
      if (this.isCurrentUserLevel(level.grade_id)) {
        return '续费会员';
      }
      
      // 检查是否需要通过购买商品升级
      if (level.name === '守护使者') {
        return '399元商品升级';
      } else if (level.name === '如来者') {
        return '1万元商品升级'
      }
    
      return '立即开通';
    },
    
    // 获取升级要求文本
    getUpgradeRequirement(levelIndex) {
		console.log(levelIndex);
      if (levelIndex === 1) { // 守护使者
        return '购买单个价值399元的商品，即可获得守护使者身份';
      } else if (levelIndex === 0) { // 如来者
        return '购买单个价值10000元的商品，即可获得如来者身份';
      }
      return '';
    },

    async handleBuy(level) {
      // 存储选中的等级
      this.selectedLevel = level;
      
      // 检查是否需要通过购买商品升级
      if (!this.isCurrentUserLevel(level.grade_id) && 
          (level.name === '守护使者' || level.name === '如来者')) {
        // 引导用户购买商品
        let specAmount = level.name === '守护使者' ? '399元' : '10000元';
        let productName = level.name === '守护使者' ? '禅心静心摆件（守护版）' : '如来禅境珍藏礼盒';
        
        uni.showToast({
          title: `请购买${productName}升级`,
          icon: 'none',
          duration: 2500
        });
        
        // 跳转到商品推荐区域
        setTimeout(() => {
          uni.showModal({
            title: '升级提示',
            content: `您需要购买价值${specAmount}的${productName}才能成为${level.name}，立即前往购买？`,
            confirmText: '去购买',
            success: (res) => {
              if (res.confirm) {
                // 跳转到商城首页或特定商品页面
                const productId = level.name === '守护使者' ? 2001 : 3001;
                uni.showModal({
                  title: "相关功能待完善"
                });
              }
            }
          });
        }, 1000);
        return;
      }
      
      // 直接付费升级/续费，显示协议
      this.agreementChecked = false; // 重置协议勾选状态
      this.showAgreementModal = true;
    },
    
    // 处理协议确认
    async confirmAgreement() {
      if (!this.agreementChecked) return;
      
      try {
        uni.showLoading({
          title: '处理中...'
        });
        
        await buyGrdeApi({
          grade_id: this.selectedLevel.grade_id
        });

        uni.showToast({
          title: '开通成功',
          icon: 'success'
        });

        // 刷新用户信息
        await user.getUserInfo();
        
        // 关闭协议弹窗
        this.showAgreementModal = false;
        this.agreementChecked = false;
        
        // 延迟返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);

      } catch (error) {
        uni.showToast({
          title: error.message || '开通失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    // 取消协议
    cancelAgreement() {
      this.showAgreementModal = false;
      this.agreementChecked = false;
    },
    
    // 切换协议勾选状态
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked;
    },

    navigateToProduct(id) {
      // 实现跳转到商品详情页的逻辑
      console.log('跳转到商品详情页:', id);
      uni.navigateTo({
        url: `/pages/shapping/detail?id=${id}`
      })
    },

    navigateToProducts() {
      // 实现跳转到商品列表页的逻辑
      console.log('跳转到商品列表页');
      uni.switchTab({
        url: '/pages/shapping/shapping'
      })
    },

    showAgreementBeforeBuy() {
      this.agreementChecked = false; // 重置协议勾选状态
      // 存储当前选择的商品信息
      this.selectedLevel = {
        grade_id: 'rulaizhe_product',
        name: '如来者'
      };
      this.showAgreementModal = true;
    },

    confirmPurchase() {
      if (!this.agreementChecked) {
        uni.showToast({
          title: '请先阅读并同意协议',
          icon: 'none'
        });
        return;
      }
      
      // 关闭协议弹窗
      this.showAgreementModal = false;
      
      // 显示购买中提示
      uni.showLoading({
        title: '正在处理...'
      });
      
      // 跳转到商品详情页
      setTimeout(() => {
        uni.hideLoading();
        this.navigateToProduct(this.productList[0].product_id);
      }, 800);
    }
  }
}
</script>

<style>
/* 导入字体图标 */
@font-face {
  font-family: 'iconfont';
  /* Project id 4874541 */
  src: url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff2?t=1743246128509') format('woff2'),
    url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff?t=1743246128509') format('woff'),
    url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.ttf?t=1743246128509') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 全局样式 */
.privileges-container {
  position: relative;
  min-height: 100vh;
  background-color: #F5F2EA; /* 与主页相同的米白色背景 */
  font-family: "思源宋体", serif;
}

/* 顶部标题栏样式 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #FFFFFF;
  z-index: 100;
  border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
  padding: 0 30rpx;
}

.back-icon {
  position: absolute;
  left: 30rpx;
  font-size: 40rpx;
  color: #6A4C29; /* 檀木棕色 */
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.title-image {
  width: 150rpx;
  height: 80rpx;
}

/* 等级选择区域样式 */
.level-header {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 30rpx;
  margin-top: 100rpx; /* 为顶部标题栏留出空间 */
  height: 100rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
}

.level-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #6A4C29;
}

/* 权益内容展示区域样式 */
.privileges-swiper {
  height: calc(100vh - 200rpx);
  background-color: #F5F2EA;
}

.privileges-scroll {
  height: 100%;
  padding: 30rpx;
  box-sizing: border-box;
}

/* 等级卡片样式 */
.level-card {
  padding: 40rpx 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 76, 41, 0.1);
  margin-bottom: 30rpx;
  position: relative;
  overflow: hidden;
}

.level-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180rpx;
  height: 180rpx;
  background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.2) 100%);
  border-radius: 0 0 0 180rpx;
}

.level-bg-0 {
  background: linear-gradient(135deg, #E2C675, #C8A675); /* 普通会员 - 淡金色渐变 */
}

.level-bg-1 {
  background: linear-gradient(135deg, #6A4C29, #A56A1E); /* 守护使者 - 木棕渐变 */
}

.level-bg-2 {
  background: linear-gradient(135deg, #C8A675, #8B4513); /* 如来者 - 金色高贵渐变 */
}

.level-card-content {
  position: relative;
  z-index: 2;
  padding: 10rpx 0;
}

.level-image {
  width: 100rpx;
  height: 100rpx;
  margin-bottom: 30rpx;
}

.level-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 10rpx;
}

.level-name {
  font-size: 40rpx;
  font-weight: 600;
  font-family: "汉仪尚巍手书", "思源宋体", serif;
  color: #FFFFFF;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
}

.level-price {
  color: #FFFFFF;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: baseline;
}

.price-symbol {
  font-size: 28rpx;
  margin-right: 4rpx;
}

.price-value {
  font-size: 40rpx;
  font-weight: 600;
}

.price-permanent {
  font-size: 36rpx;
  font-weight: 600;
  background: linear-gradient(to right, #FFFFFF, #FFD700);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
  letter-spacing: 4rpx;
  padding-right: 6rpx;
}

.price-unit {
  font-size: 24rpx;
  margin-left: 4rpx;
  opacity: 0.9;
}

.level-tag {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  padding: 8rpx 20rpx;
  background-color: rgba(255, 255, 255, 0.25);
  color: #FFFFFF;
  font-size: 24rpx;
  border-radius: 30rpx;
  backdrop-filter: blur(4px);
}

/* 内容区块通用样式 */
.content-section {
  padding: 30rpx;
  background-color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 20rpx rgba(106, 76, 41, 0.05);
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.title-icon {
  width: 8rpx;
  height: 32rpx;
  background-color: #C8A675; /* 佛经黄 */
  margin-right: 16rpx;
  border-radius: 4rpx;
}

.section-title text {
  font-size: 32rpx;
  font-weight: 600;
  color: #6A4C29; /* 檀木棕色 */
  font-family: "汉仪尚巍手书", "思源宋体", serif;
}

/* 权益说明样式 */
.privileges-list {
  font-size: 28rpx;
  color: #75695C; /* 深棕色 */
  line-height: 1.6;
}

.privilege-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.privilege-item {
  display: flex;
  align-items: center;
  background-color: rgba(200, 166, 117, 0.1);
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
}

.privilege-icon {
  font-size: 36rpx;
  margin-right: 16rpx;
}

.privilege-text {
  font-size: 28rpx;
  color: #75695C;
  flex: 1;
}

/* 入境禅定样式 */
.meditation-image {
  width: 100%;
  border-radius: 12rpx;
  margin: 0;
  box-shadow: 0 8rpx 16rpx rgba(106, 76, 41, 0.1);
}

.meditation-desc {
  font-size: 28rpx;
  color: #75695C;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

/* 会员有效期样式 */
.validity-desc {
  font-size: 28rpx;
  color: #75695C;
  line-height: 1.6;
}

/* 底部空间 */
.bottom-space {
  height: 120rpx;
}

/* 底部按钮样式 */
.buy-button-container {
  position: fixed;
  bottom: 40rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 32rpx;
  z-index: 99;
}

.buy-button {
  width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  border-radius: 44rpx;
  box-shadow: 0 8rpx 16rpx rgba(106, 76, 41, 0.2);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.buy-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
  z-index: -1;
  transition: all 0.3s ease;
}

.buy-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  z-index: 1;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* 加载状态样式 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid rgba(200, 166, 117, 0.2);
  border-top: 6rpx solid #C8A675;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20rpx;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  font-size: 28rpx;
  color: #6A4C29;
}

/* 新增：升级要求样式 */
.upgrade-requirements {
  background-color: #FFFBF1;
  border: 1rpx dashed #C8A675;
}

.requirement-item {
  display: flex;
  align-items: center;
  padding: 16rpx;
  background-color: rgba(200, 166, 117, 0.05);
  border-radius: 12rpx;
}

.requirement-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(200, 166, 117, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.requirement-icon .iconfont {
  font-size: 32rpx;
  color: #6A4C29;
}

.requirement-info {
  flex: 1;
}

.requirement-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #6A4C29;
  margin-bottom: 6rpx;
  display: block;
}

.requirement-desc {
  font-size: 26rpx;
  color: #75695C;
  line-height: 1.5;
}

/* 会员协议弹窗样式 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-height: 80vh;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.agreement-modal {
  background-color: #FFFBF1;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid rgba(106, 76, 41, 0.1);
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #6A4C29;
  font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.modal-close {
  font-size: 40rpx;
  color: #6A4C29;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-body {
  flex: 1;
  padding: 30rpx;
  overflow-y: auto;
}

.agreement-content {
  padding: 20rpx 30rpx;
}

.agreement-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #6A4C29;
  margin-bottom: 20rpx;
  font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.agreement-paragraph {
		width: 85%;
  font-size: 30rpx;
  color: #75695C;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.agreement-section {
  margin-bottom: 30rpx;
}

.agreement-section-title {

  font-size: 30rpx;
  font-weight: 600;
  color: #6A4C29;
  margin-bottom: 16rpx;
  position: relative;
  padding-left: 20rpx;
}

.agreement-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 28rpx;
  background-color: #C8A675;
  border-radius: 4rpx;
}

.agreement-item {
  font-size: 28rpx;
  width: 85%;
  color: #75695C;
  line-height: 1.6;
  padding-left: 20rpx;
  position: relative;
  margin-bottom: 10rpx;
}

.agreement-item::before {
  content: '•';
  position: absolute;
  left: 0;	
  color: #C8A675;
}

.modal-footer {
  padding: 30rpx;
  border-top: 1rpx solid rgba(106, 76, 41, 0.1);
}

.agreement-footer {
  background-color: #FFFFFF;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #C8A675;
  border-radius: 8rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox.checked {
  background-color: #C8A675;
}

.checkbox-icon {
  color: #FFFFFF;
  font-size: 28rpx;
  line-height: 1;
}

.checkbox-text {
  font-size: 28rpx;
  color: #6A4C29;
}

.button-group {
  display: flex;
  justify-content: space-between;
}

.cancel-button, .confirm-button {
  width: 48%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  border-radius: 40rpx;
  border: none;
}

.cancel-button {
  background-color: #F2EBE0;
  color: #6A4C29;
}

.confirm-button {
  background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
  color: #FFFFFF;
  font-weight: 600;
  box-shadow: 0 4rpx 12rpx rgba(106, 76, 41, 0.2);
}

.confirm-button.disabled {
  opacity: 0.5;
}

/* 无特权说明样式 */
.no-privileges {
  text-align: center;
  padding: 40rpx 0;
  color: #A89B88;
  font-size: 28rpx;
}

/* 新增：商品列表区域样式 */
.product-list-section {
  background-color: #FFFBF1;
  border: 1rpx dashed #C8A675;
  padding: 40rpx 30rpx;
  margin-top: 20rpx;
}

.product-desc {
  font-size: 30rpx;
  color: #75695C;
  line-height: 1.6;
  padding: 20rpx 0;
  margin-bottom: 30rpx;
  text-align: center;
  border-bottom: 1rpx dashed rgba(200, 166, 117, 0.3);
}

.single-product-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 10rpx 20rpx rgba(106, 76, 41, 0.12);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.single-product-container:active {
  transform: scale(0.98);
}

.single-product-container::after {
  content: '';
  position: absolute;
  top: -25rpx;
  right: -25rpx;
  width: 140rpx;
  height: 140rpx;
  background: linear-gradient(135deg, transparent 50%, rgba(200, 166, 117, 0.3) 100%);
  border-radius: 0 0 0 140rpx;
  z-index: 1;
}

.product-image-large {
  width: 100%;
  height: 400rpx;
  object-fit: cover;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 16rpx rgba(106, 76, 41, 0.15);
}

.product-info-large {
  text-align: center;
  width: 100%;
}

.product-title-large {
  font-size: 38rpx;
  font-weight: 600;
  color: #6A4C29;
  margin-bottom: 30rpx;
  font-family: "汉仪尚巍手书", "思源宋体", serif;
}

.product-price-row-large {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.product-price-large {
  font-size: 46rpx;
  color: #C8A675;
  font-weight: 600;
}

.buy-now-btn-large {
  background: linear-gradient(135deg, #C8A675 0%, #6A4C29 100%);
  color: #FFFFFF;
  font-size: 34rpx;
  font-weight: 600;
  padding: 18rpx 50rpx;
  border-radius: 40rpx;
  box-shadow: 0 8rpx 16rpx rgba(106, 76, 41, 0.25);
  position: relative;
  overflow: hidden;
}
</style>